<template>
	<view class="app register">
		<view class="title">
			<u-icon name="arrow-leftward" style="margin: 0 0 24rpx" @tap="pageTo"></u-icon>
			<text>注册</text>
			<text class="sub">请输入手机号密码注册</text>
		</view>
		<view class="content">
			<view class="form-view">
				<view class="form-item form-border">
					<input placeholder-style="'color':'#8e8e8e'" v-model="form1.mobile" placeholder="手机号"
						class="form-input" type="text" :maxlength="11" />
				</view>
				<view class="form-item form-border">
					<input placeholder-style="'color':'#8e8e8e'" placeholder="请输入短信验证码" v-model="form1.code"
						class="form-input" type="number" :maxlength="6" />
					<vk-data-verification-code custom-style="font-size: 28rpx" type="register" seconds="60"
						:mobile="form1.mobile"></vk-data-verification-code>
				</view>
				<view class="form-item form-border">
					<input placeholder-style="'color':'#8e8e8e'" placeholder="请输入新密码" v-model="form1.password"
						class="form-input" type="password" />
				</view>
				<view class="form-item form-border">
					<input placeholder-style="'color':'#8e8e8e'" placeholder="请再次输入新密码" v-model="form1.password2"
						class="form-input" type="password" />
				</view>
			</view>
			<view class="submit-btn">
				<button class="btn success circle" hover-class="hover" shape="circle" type="success" :plain="false"
					:hair-line="false" @click="loginBySms">
					注 册
				</button>
			</view>
			<view class="footer" style="margin-bottom: 100rpx">
				<label>
					<checkbox-group @change="checkboxChange">
						<checkbox class="footer-checkbox" active-color="#737373" shape="circle" value="true"
							:checked="form1.agreement"></checkbox>
						<text>我已认真阅读并同意</text>
					</checkbox-group>
				</label>
				<navigator url="./agreement?type=2" open-type="navigate" style="color: #007aff">
					《用户协议》
				</navigator>
				、
				<navigator url="./agreement?type=1" open-type="navigate" style="color: #007aff">
					《隐私协议》
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var vk = uni.vk // vk依赖

	export default {
		data() {
			return {
				// init请求返回的数据
				data: {},
				// 表单请求数据
				form1: {
					agreement: false,
					mobile: "",
					password: "",
					password2: "",
					code: "",
					type: "register"
				},
				isRotate: false,
				envH5: ""
			}
		},
		onLoad(options) {
			this.init(options)
		},
		methods: {
			// 页面数据初始化函数
			init(options = {}) {
				let that = this
				if (options.mobile) {
					that.form1.mobile = options.mobile
				}
				if (!that.form1.inviteCode) {
					that.form1.inviteCode = vk.getVuex("$user.inviteCode")
				}
				// #ifdef H5
				that.envH5 = vk.h5.getEnv()
				// #endif
			},
			pageTo() {
				vk.navigateBack()
			},
			checkboxChange(e) {
				let that = this
				let value = e.detail.value || []
				if (value.length > 0 && value[0]) {
					that.form1.agreement = true
				} else {
					that.form1.agreement = false
				}
			},
			// 登录(手机号+验证码) 不存在会自动注册
			loginBySms() {
				let that = this
				if (that.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false
				}
				const {
					agreement,
					mobile,
					code,
					password,
					password2
				} = that.form1
				if (!agreement) {
					return vk.toast("请阅读并同意用户服务及隐私协议")
				}
				if (!vk.pubfn.checkStr(mobile, "mobile")) {
					return vk.toast("请输入正确的手机号码")
				}
				if (!vk.pubfn.checkStr(password, "pwd")) {
					return vk.toast("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线")
				}
				if (!vk.pubfn.checkStr(password2, "pwd")) {
					return vk.toast("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线")
				}
				if (password != password2) {
					return vk.toast("两次密码必须相同!")
				}
				if (!vk.pubfn.checkStr(code, "mobileCode")) {
					return vk.toast("验证码格式为6位数字")
				}

				that.isRotate = true
				vk.userCenter.loginBySms({
					data: that.form1,
					success: data => {
						that.isRotate = false
						if (data.type == "login") {
							vk.toast("登录成功!")
						} else {
							vk.toast("注册成功!")
						}
						setTimeout(() => {
							vk.setVuex("$user.login.username", mobile)
							vk.setVuex("$user.login.password", password)
							vk.setVuex("$user.login.savePwd", true)
							if (that.envH5 === "h5-weixin") {
								return this.getH5WeixinCode()
							}
							// 跳转到首页,或页面返回
							let pages = getCurrentPages()
							if (
								pages.length >= 2 &&
								pages[pages.length - 2].route &&
								pages[pages.length - 2].route.indexOf("login") == -1
							) {
								vk.navigateBack()
							} else {
								// 进入首页
								vk.navigateToHome()
							}
						}, 1000)
					},
					complete: () => {
						that.isRotate = false
					}
				})
			},
			getPrefix(url) {
				let parts = url.split('/');
				let index = parts.indexOf('pages');
				if (index !== -1) {
					return parts.slice(0, index).join('/');
				} else {
					return url;
				}
			},
			// 微信公众号授权登录
			getH5WeixinCode() {
				let appid = vk.getVuex("$app.config.service.h5weixin.appid")
				let scope = "snsapi_base"
				let redirect_uri = window.location.href.split("?")[0];
				//截取到主域名 "https://www.a.net/pages/login/register
				redirect_uri = this.getPrefix(redirect_uri)
				let url =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=login#wechat_redirect`
				window.location.href = url
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./css/main.css");

	.register {
		height: 100vh;
		background-color: #f5f5f5;
	}
</style>